<html>
    <head>
        <title>上传 & 下载</title>
    </head>
    <body>
        <script>
            // 上传、下载

                    /*
                        一、uni.uploadFile(Object)

                                1、概述

                                        将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data.

                                        如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。

                                        另外选择和上传 非图像、视频文件 参考： https://ask.dcloud.net.cn/article/35547、


                                        ★、注意：在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单

                                        推荐开发者上传到uniCloud，uniCloud提供了免费CDN和更好的易用性，包括安全的cdn直传。


                                2、uploadFile 兼容性
                                
                                            HarmonyOS
                                            HBuilderX 4.23

                                3、OBJECT 参数说明

                                                            <1>、参数列表

                                                                        参数名      	  类型	    必填	    说明	                                                                        平台差异说明

                                                                        1、url	            String	    是	    开发者服务器 url	
                                                                    
                                                                        2、files	        Array	    是      （files和filePath选其一）	需要上传的文件列表。
                                                                                                                使用 files 时，filePath 和 name 不生效。	                                        App、H5（ 2.6.15+）

                                                                        3、fileType	        String	            见平台差异说明	文件类型，image/video/audio	                                         仅支付宝小程序，且必填。

                                                                        4、file	            File	    否	    要上传的文件对象。	                                                                 仅H5（2.6.15+）支持

                                                                        5、filePath	        String	    是(files和filePath选其一）	要上传文件资源的路径。	

                                                                        6、name	            String	    是	    文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容	

                                                                        7、header	        Object	    否	    HTTP 请求 Header, header 中不能设置 Referer。	
                                                                        
                                                                        8、timeout	        Number	    否	    超时时间，单位 ms	                                                                 H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序、支付宝小程序、抖音小程序、快手小程序
                                                                        
                                                                        9、formData	        Object	    否	    HTTP 请求中其他额外的 form data	
                                                                        
                                                                        10、success	        Function	否	    接口调用成功的回调函数	
                                                                        
                                                                        11、fail	        Function	否	    接口调用失败的回调函数	
                                                                        
                                                                        12、complete	    Function	否	    接口调用结束的回调函数（调用成功、失败都会执行）
                                                                        
                                                            <2>、注意：

                                                                        ①、App支持多文件上传，微信小程序只支持单文件上传，传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。

                                                                        ②、hello uni-app 中的客服反馈，支持多图上传。  uni-app 插件市场(https://ext.dcloud.net.cn/) 中也有多个封装的组件。

                                                                        ③、App平台选择和上传非图像、视频文件 ，参考 ：https://ask.dcloud.net.cn/article/35547

                                                                        ④、网络请求的 "超时时间" 可统一在 manifest.json中配置  "networkTimeout".

                                                                        ⑤、支付宝小程序开发工具上传文件返回的 http 状态码为字符串形式，支付宝小程序真机返回的状态码为数字形式


                                                            <3>、files 参数说明

                                                                        files 参数是一个 file 对象的数组， file 对象的结构如下：

                                                                                参数名	        类型	必填	    说明

                                                                            ①、name	           String	否	    multipart 提交时，表单的项目名，默认为 file

                                                                            ②、file	           File	    否	    要上传的文件对象，仅H5（2.6.15+）支持

                                                                            ③、uri	           String	是	    文件的本地地址

                                                                    ★、注意： 

                                                                            如果  name 不填或填的值相同，可能导致服务器读取文件时只能读取到一个文件。

                                                            <4>、success 返回参数说明

                                                                            参数	    类型	        说明

                                                                        ①、data	        String	    开发者服务器返回的数据

                                                                        ②、statusCode	Number	    开发者服务器返回的 HTTP 状态码

                                4、示例：

                                                  uni.chosseImage({
                                                        success:(choseImage)=>{
                                                                const tempFilePaths = choseImage.tempFilePaths;
                                                                uni.uploadFile({
                                                                    url: 'https:// www.example.com/upload',  // 仅为示例，非真实的借口地址
                                                                    filePath: tempFilePaths[0],
                                                                    name:'file',
                                                                    formData:{
                                                                        'user': 'test'
                                                                    },
                                                                    success:(uploadFileRes)=>{
                                                                        console.log(uploadFileRes.data)
                                                                    }
                                                                })
                                                        }
                                                  })

                                5、返回值

                                           如果希望返回一个 uploadTask 对象，需要至少传入 success /fail / complete 参数中的一个。 
                                           
                                           例如：

                                                var uploadTask = uni.uploadFile({
                                                      url: 'https://www.example.com/upload',
                                                      complete:()=>{
                                                      
                                                      }          
                                                })
                                                
                                                uploadTask.abort();

                                           如果没有传入  success / fail / complete 参数，则会返回封装后的Promise对象：  Promise 封装(https://uniapp.dcloud.net.cn/api/index.html#promise-%E5%B0%81%E8%A3%85)

                                           通过  uploadTask , 可监听 "上传进度变化事件",以及取消上传任务。

                                           <1>、返回值类型

                                                    类型：  UploadTask

                                           <2>、uploadTask 对象的方法列表

                                                            方法	               参数	        说明

                                                        ①、abort		                    中断上传任务

                                                        ②、onProgressUpdate	    callback	监听上传进度变化

                                                        ③、onHeadersReceived	callback	监听 HTTP Response Header 事件。会比请求完成事件更早,仅微信小程序平台支持，规范详情

                                                        ④、offProgressUpdate	callback	取消监听上传进度变化事件，仅微信小程序平台支持，规范详情

                                                        ⑤、offHeadersReceived	callback	取消监听 HTTP Response Header 事件，仅微信小程序平台支持，规范详情

                                           <3>、onProgressUpdate 返回参数说明

                                                            参数	                    类型	        说明

                                                        ①、progress	                    Number	    上传进度百分比

                                                        ②、totalBytesSent	            Number	    已经上传的数据长度，单位 Bytes

                                                        ③、totalBytesExpectedToSend	    Number	    预期需要上传的数据总长度，单位 Bytes

                                          

                                           <4>、UploadTask 的方法

                                                        ①、abort() :void

                                                            中断上传任务
                                                        
                                                        ②、onProgressUpdate(callback: UploadFileProgressUpdateCallback): void

                                                            监听上传进度变化

                                                            ★、onProgressUpdate 兼容性
                                                                        HarmonyOS
                                                                        HBuilderX 4.23

                                                            ★、参数 HarmonyOS 兼容性

                                                                        名称	    类型	                                必填	默认值	兼容性	描述
                                                                    callback	(result: OnProgressUpdateResult) => void	是	    -	    -	    -

                                           <5>、示例

                                                        uni.chooseImage({
                                                                success: (chooseImageRes) => {
                                                                    const tempFilePaths = chooseImageRes.tempFilePaths;
                                                                    const uploadTask = uni.uploadFile({
                                                                        url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
                                                                        filePath: tempFilePaths[0],
                                                                        name: 'file',
                                                                        formData: {
                                                                            'user': 'test'
                                                                        },
                                                                        success: (uploadFileRes) => {
                                                                            console.log(uploadFileRes.data);
                                                                        }
                                                                    });

                                                                    uploadTask.onProgressUpdate((res) => {
                                                                        console.log('上传进度' + res.progress);
                                                                        console.log('已经上传的数据长度' + res.totalBytesSent);
                                                                        console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);

                                                                        // 测试条件，取消上传任务。
                                                                        if (res.progress > 50) {
                                                                            uploadTask.abort();
                                                                        }
                                                                    });
                                                             }   
                                                        });

                        */

                        /*
                            二、uni.downloadFile(Object)

                                        下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。
                                        
                                        1、downloadFile 兼容性

                                                                HarmonyOS
                                                                HBuilderX 4.23

                                                                <1>、Object 参数说明

                                                                                参数名	        类型	        必填	        说明	                                                    平台差异说明

                                                                            ①、url	            String	        是	        下载资源的 url	

                                                                            ②、header	        Object	        否	        HTTP 请求 Header, header 中不能设置 Referer。	

                                                                            ③、timeout	        Number	        否	        超时时间，单位 ms	                                    H5、APP、微信小程序、支付宝小程序、抖音小程序、快手小程序
                                                                        
                                                                            ④、filePath	        string	        否	        指定文件下载后存储的路径 (本地路径)	                     小程序端支持（微信IOS小程序保存到相册需要添加此字段才可以正常保存）
                                                                            
                                                                            ⑤、success	        Function	    否	        下载成功后以 tempFilePath 的形式传给页面，
                                                                                                                            res = {tempFilePath: '文件的临时路径'}

                                                                            ⑥、fail	            Function	    否	        接口调用失败的回调函数	

                                                                            ⑦、complete	        Function	    否	        接口调用结束的回调函数（调用成功、失败都会执行）	

                                                                            ★、注意： 文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用  uni.saveFile,才能在应用下次启动时访问得到。


                                                                <2>、success 返回参数说明

                                                                                参数	            类型	说明	                                                                                平台差异说明

                                                                            ①、tempFilePath	       String	临时文件路径，下载后的文件会存储到一个临时文件	                    微信小程序、支付宝小程序、百度小程序、抖音小程序、飞书小程序

                                                                            ②、statusCode	       Number	开发者服务器返回的 HTTP 状态码	                                  微信小程序、QQ小程序、百度小程序、抖音小程序、飞书小程序

                                                                            ③、apFilePath	       String	下载文件保存的路径（本地临时文件）。
                                                                                                            入参未指定 filePath 的情况下可用	                                                    支付宝小程序

                                                                            ④、filePath	           String	用户文件路径 (本地路径)。
                                                                                                            传入 filePath 时会返回，跟传入的 filePath 一致	                   微信小程序、支付宝小程序、抖音小程序、飞书小程序

                                                                            ⑤、fileContent	       Buffer	文件内容	QQ小程序

                                
                                        2、返回值
                                        
                                                    返回值类型：  DownloadTask

                                                    <1>、DownloadTask 的方法

                                                            ①、abort():void

                                                                    中断下载任务

                                                            ②、onProgressUpdate(callback: DownloadFileProgressUpdateCallback): void

                                                                    监听下载进度变化

                                                                    ★、onProgerssUpdate 兼容性

                                                                            HarmonyOS
                                                                            HBuilderX 4.23

                                                                    ★、参数 HarmonyOS 兼容性

                                                                            名称	        类型	                                必填	默认值	兼容性	描述
                                                                            callback	(result: OnProgressDownloadResult) => void	是	    -	    -	    -

                                                                    ★、OnProgressDownloadResult 的属性值

                                                                                名称	                    类型	    必填	默认值  	兼容性	        描述

                                                                            ①、progress	                    number	    是	    -           ok          下载进度百分比

                                                                            ③、totalBytesWritten	        number	    是	    -	        ok          已经下载的数据长度，单位 Bytes

                                                                            ⑤、totalBytesExpectedToWrite	number	    是	    -	        OK          预期需要下载的数据总长度，单位 Bytes

                                                                         △、注意：  网络请求的 "超时时间" 可以统一在 manifest.json 中配置  "networkTimeout"

                                                    <2>、示例
                                                        
                                                                uni.downloadFile({
                                                                    url:'https:// www.example.com/file/test',  // 仅为示例，并非真实的资源
                                                                    success:(res)=>{
                                                                        if(res.statusCode ==200){
                                                                            console.log('下载成功');
                                                                        }
                                                                    }
                                                                })

                                                    <3>、返回值

                                                                如果希望返回一个 downloadTask 对象，需要至少传入  success / fail / complete 参数中的一个。

                                                                例如：

                                                                        var downloadTask = uni.downloadFile({
                                                                            url:'https:// www.example.com/file/test', 
                                                                            complete:()=>{}
                                                                        }}

                                                                        downloadTask.abort() // 中断下载任务


                                                                果没有传入 success / fail / complete 参数，则会返回封装后的 Promise 对象：Promise 封装(https://uniapp.dcloud.net.cn/api/index.html#promise-%E5%B0%81%E8%A3%85)

                                                                通过 downlaodTask ,可监听下载进度变化事件，以及取消下载任务。

                                                                ★、downloadTask 对象的方法列表

                                                                                    方法	              参数	          说明	                                                                                        最低版本 

                                                                                ①、abort		                    中断下载任务	                                                                                        *

                                                                                ②、onProgressUpdate	    callback	监听下载进度变化	                                                                                    *

                                                                                ③、onHeadersReceived	callback	监听 HTTP Response Header 事件，会比请求完成事件更早,仅微信小程序平台支持，规范详情	
                                                                                
                                                                                ④、offProgressUpdate	callback	取消监听下载进度变化事件，仅微信小程序平台支持，规范详情
                                                                                
                                                                                ⑤、offHeadersReceived	callback	取消监听 HTTP Response Header 事件，仅微信小程序平台支持，规范详情

                                                                ★、onProgressUpdate 返回参数说明

                                                                                    参数	                    类型	        说明

                                                                                ①、progress	                    Number	     下载进度百分比

                                                                                ②、totalBytesWritten	        Number	     已经下载的数据长度，单位 Bytes

                                                                                ③、totalBytesExpectedToWrite	Number	     预期需要下载的数据总长度，单位 Bytes


                                        3、示例

                                                const downloadTask = uni.downloadFile({
                                                    url: 'http://www.example.com/file/test', //仅为示例，并非真实的资源
                                                    success: (res) => {
                                                        if (res.statusCode === 200) {
                                                            console.log('下载成功');
                                                        }
                                                    }
                                                });

                                                downloadTask.onProgressUpdate((res) => {
                                                    console.log('下载进度' + res.progress);
                                                    console.log('已经下载的数据长度' + res.totalBytesWritten);
                                                    console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);

                                                    // 满足测试条件，取消下载任务。
                                                    if (res.progress > 50) {
                                                        downloadTask.abort();
                                                    }
                                                });
                        */
        </script>
    </body>
</html>